<template>
    <div class="full-screen-container min-h-screen bg-white">
        <!-- 顶部标题栏 -->
        <div class="h-16 bg-blue-500 flex items-center justify-center text-2xl text-white font-semibold">
            人才画像后台管理系统
        </div>

        <!-- 主体内容 -->
        <div class="flex flex-col items-center justify-start py-8 space-y-8">
            <!-- 系统介绍 -->
            <div class="text-3xl font-bold text-gray-800" style="padding-right: 15%;">
                系统介绍
            </div>

            <!-- 核心功能模块展示 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" style="padding-right: 15%;">
                <!-- 模块卡片 -->
                <div v-for="module in modules" :key="module.name"
                     class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                    <el-icon class="text-3xl text-blue-500 mb-2">
                        <component :is="module.icon" />
                    </el-icon>
                    <h3 class="text-lg font-bold mb-2">
                        {{ module.name }}
                    </h3>
                    <p class="text-gray-600 text-xs mb-2">
                        {{ module.description }}
                    </p>
                    <el-button type="primary" size="small" @click="navigateTo(module.path)">
                        查看详情
                    </el-button>
                </div>
                <!-- 系统优势展示 -->
                <div class="bg-blue-100 p-4 rounded-lg text-center shadow-sm">
                    <h2 class="text-lg font-bold mb-2 text-blue-500">
                        系统优势
                    </h2>
                    <ul class="text-gray-700 text-xs">
                        <li class="flex items-center mb-2">
                            <el-icon class="text-lg text-blue-500 mr-1">
                                <Check />
                            </el-icon>
                            易用性强，操作简单
                        </li>
                        <li class="flex items-center mb-2">
                            <el-icon class="text-lg text-blue-500 mr-1">
                                <Check />
                            </el-icon>
                            功能全面，覆盖人才管理的方方面面
                        </li>
                        <li class="flex items-center mb-2">
                            <el-icon class="text-lg text-blue-500 mr-1">
                                <Check />
                            </el-icon>
                            安全保障高，数据加密存储
                        </li>
                    </ul>
                </div>
            </div>




        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { useRouter } from 'vue-router';
    import {
        User,
        Document,
        Settings,
        UserGroup,
        Check,
        Message,
        Phone
    } from '@element-plus/icons-vue';

    const router = useRouter();

    const modules = ref([
        {
            name: '用户管理',
            icon: 'User',
            description: '统一管理用户信息，支持多角色权限分配',
            path: '/system/usermanage'
        },
        {
            name: '权限管理',
            icon: 'Lock',
            description: '灵活配置权限规则，保障系统安全稳定',
            path: '/system/authmanage'
        },
        {
            name: '测评管理',
            icon: 'Document',
            description: '配置和管理测评题目与题型，助力人才评估',
            path: '/system/topicmanage'
        },
        {
            name: '岗位管理',
            icon: 'UserGroup',
            description: '管理岗位信息，实现人才与岗位的精准匹配',
            path: '/system/poststationmanage'
        },
        {
            name: '通知公告',
            icon: 'Bell',
            description: '及时发布与接收系统通知公告，保障信息畅通',
            path: '/system/noticemanage'
        }
    ]);

    const navigateTo = (path: string) => {
        router.push(path);
    };
</script>

<style scoped>
    .full-screen-container {
        width: 100vw;
        /* 浏览器窗口的宽度 */
        height: 100vh;
        /* 浏览器窗口的高度 */
        background-color: #ffffff;
        /* 可以选择合适的背景色 */
        margin: 0;
        /* 去除默认的外边距 */
        padding: 0;
        /* 去除默认的内边距 */
    }

    :deep(.el-button--primary) {
        background-color: #2C3E50;
        border-color: #2C3E50;
    }

    :deep(.el-button--primary:hover) {
        background-color: #000;
        border-color: #000;
    }
</style>